  <template>
	<view class="container">
		<u-grid :border="false">
			<u-grid-item v-for="(item, index) in menuItems" :key="index" @click="menuClick(item.path)"
				:custom-style="gridItemStyle" bg-color="white">
				<u-icon :name="item.icon" :size="40"></u-icon>
				<view class="grid-text">{{ item.title }}</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuItems: [{
						title: '工作台',
						icon: '/static/index/workTable.png',
						path: '/pages/regulator/workspace'
					},
					{
						title: '检查记录',
						icon: '/static/index/order.png',
						path: '/pages/regulator/inspection-record-list'
					},
					{
						title: '打印详情',
						icon: '/static/index/print.png',
						path: '/pages/regulator/print-detail-list'
					},
					{
						title: '开具证明',
						icon: '/static/index/chartcolumn.png',
						path: '/pages/regulator/issuance-certificate'
					},
					{
						title: '会员信息',
						icon: '/static/index/people.png',
						path: '/pages/regulator/member-list'
					}
				],

				gridItemStyle: {
					backgroundColor: '#ffffff',
					borderRadius: '20rpx',
					margin: '30rpx',
					padding: '30rpx 0'
				}
			};
		},
		methods: {
			menuClick(path) {
				uni.navigateTo({
					url: path
				});
			}
		}
	};
</script>

<!-- 5. 修改页面背景色和整体布局 -->
<style lang="scss" scoped>
	::v-deep .u-grid-item{
		width: 175rpx !important;
	}
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 14rpx;
		color: #303133; // 使用更明确的颜色值
	}
</style>